<template>
  <div class="camera-info">
    <h1>摄像机</h1>
    <div class="base-info">
      <h3 class="bold" id="baseInfo">基本信息</h3>
      <section class="flex">
        <img :src="baseInfo.snapshotPath" width="250" alt />
        <div class="info flex">
          <span>
            客户名称：
            <label>{{ baseInfo.customerName }}</label>
          </span>
          <span>
            门店名称：
            <label>{{ baseInfo.shopName }}</label>
          </span>
          <span>
            CID：
            <label>{{ baseInfo.customerId }}</label>
          </span>
          <span>
            ShopID：
            <label>{{ baseInfo.shopId.slice(0, 10) + '...' }}</label>
            <a-icon type="copy" class="hand" @click="copyToClipboard(baseInfo.shopId)" />
          </span>
          <span>
            CameraID：
            <label>{{ baseInfo.id.slice(0, 10) + '...' }}</label>
            <a-icon type="copy" class="hand" @click="copyToClipboard(baseInfo.id)" />
          </span>
          <span>
            MacID：
            <label>{{ baseInfo.mac }}</label>
          </span>
          <span>
            Camerano：
            <label>{{ baseInfo.no }}</label>
          </span>
          <span>
            摄像头类型：
            <label>{{ baseInfo.type }}</label>
          </span>
          <span>
            摄像头型号：
            <label>{{ baseInfo.model }}</label>
          </span>
          <span>
            在线状态：
            <label
              :class="[baseInfo.onlineStatus === '离线' ? 'offlineStatus' : '']"
            >{{ baseInfo.onlineStatus }}</label>
          </span>
        </div>
      </section>
    </div>
    <div class="work-info">
      <h3 class="bold" id="workInfo">运行信息</h3>
      <section>
        <div class="info">
          <h3>关联设备</h3>
          <div class="row flex">
            <span>
              盒子端口：
              <label>{{ baseInfo.boxPort }}</label>
            </span>
            <span>
              MacID：
              <label>{{ baseInfo.mac }}</label>
            </span>
            <span>
              boxNo：
              <label>{{ baseInfo.boxNo }}</label>
            </span>
          </div>
        </div>
        <div class="info">
          <h3>运营配置</h3>
          <div class="row flex">
            <span>
              绑定时间：
              <label>{{ baseInfo.bindTime }}</label>
            </span>
            <span>
              上传视频：
              <label>{{ baseInfo.uploadVideoStatus }}</label>
            </span>
            <span>
              计算码流：
              <label>{{ baseInfo.dataRate }}</label>
            </span>
            <span>
              业务程序：
              <label>{{ baseInfo.runningProcess ? baseInfo.runningProcess.join() : '' }}</label>
            </span>
            <span>
              区域配置：
              <label>{{ baseInfo.areaConfig ? baseInfo.areaConfig.join() : '' }}</label>
            </span>
          </div>
        </div>
        <div class="info">
          <h3>摄像头参数</h3>
          <div class="row flex">
            <span>
              快门时间：
              <label>{{ baseInfo.shutterTime }}</label>
            </span>
            <span>
              宽动态：
              <label>{{ baseInfo.wdrStatus }}</label>
            </span>
            <span>
              宽动态等级：
              <label>{{ baseInfo.wdrLevel }}</label>
            </span>
            <span>
              网络配置：
              <label>{{ baseInfo.netConfig ? baseInfo.netConfig.join() : '' }}</label>
            </span>
            <span>
              时间配置：
              <label>{{ baseInfo.timeConfig ? baseInfo.timeConfig.join() : '' }}</label>
            </span>
          </div>
        </div>
        <div class="info">
          <h3>主码流配置</h3>
          <div class="row flex">
            <p>
              <label>分辨率(主)：{{baseInfo.majorCamVideoConfig.resolution}}</label>
            </p>
            <p>
              <label>图像质量(主):{{baseInfo.majorCamVideoConfig.videoQuality}}</label>
            </p>
            <p>
              <label>视频编码(主):{{baseInfo.majorCamVideoConfig.encode}}</label>
            </p>
          </div>
          <div class="row flex">
            <p>
              <label>关键帧间隔(主):{{baseInfo.majorCamVideoConfig.keyFrameInterval}}</label>
            </p>
            <p>
              <label>
                帧率(主)：
                <span
                  v-show="baseInfo.majorCamVideoConfig.frameRate"
                >{{baseInfo.majorCamVideoConfig.frameRate}}fps</span>
              </label>
            </p>
            <p>
              <label>
                码流上限(主)：
                <span
                  v-show="baseInfo.majorCamVideoConfig.dataRateUpperLimit"
                >{{baseInfo.majorCamVideoConfig.dataRateUpperLimit}}Kbps</span>
              </label>
            </p>
          </div>
          <div class="row flex">
            <p>
              <label>码率类型(主):{{ baseInfo.majorCamVideoConfig.fpsType }}</label>
            </p>
          </div>
        </div>
        <div class="info">
          <h3>次码流配置</h3>
          <div class="row flex">
            <p>
              <label>分辨率(次)：{{baseInfo.minorCamVideoConfig.resolution}}</label>
            </p>
            <p>
              <label>图像质量(次):{{baseInfo.minorCamVideoConfig.videoQuality}}</label>
            </p>
            <p>
              <label>视频编码(次):{{baseInfo.minorCamVideoConfig.encode}}</label>
            </p>
          </div>
          <div class="row flex">
            <p>
              <label>关键帧间隔(次):{{baseInfo.minorCamVideoConfig.keyFrameInterval}}</label>
            </p>
            <p>
              <label>
                帧率(次)：
                <span
                  v-show="baseInfo.minorCamVideoConfig.frameRate"
                >{{baseInfo.minorCamVideoConfig.frameRate}}fps</span>
              </label>
            </p>
            <p>
              <label>
                码流上限(次)：
                <span
                  v-show="baseInfo.minorCamVideoConfig.dataRateUpperLimit"
                >{{baseInfo.minorCamVideoConfig.dataRateUpperLimit}}Kbps</span>
              </label>
            </p>
          </div>
          <div class="row flex">
            <p>
              <label>码率类型(次):{{ baseInfo.minorCamVideoConfig.fpsType }}</label>
            </p>
          </div>
          <h3 class="bold">运行状态</h3>
          <p class="href">点击此处查看运行信息</p>
        </div>
      </section>
    </div>
    <div class="stock-record">
      <h3 class="bold" id="stockRecord">出入库记录</h3>
      <section>
        <span>点击此处查看出入库记录</span>
      </section>
    </div>
    <div class="breakdown-record">
      <h3 class="bold" id="breakdownRecord">故障记录</h3>
      <section>
        <span>点击此处查看出故障记录</span>
      </section>
    </div>
  </div>
</template>
<script>
import req from '@/utils/request'
import { getQueryString } from '@/utils'
export default {
  data() {
    return {
      baseInfo: {}
    }
  },
  created() {
    this.getBaseInfo()
  },
  methods: {
    getBaseInfo() {
      const params = {
        cameraId: getQueryString('cameraId'),
      }
      req.get('/api/camera/getNewRetailInfo', params).then(res => {
        this.baseInfo = res.data
      })
    },
    copyToClipboard(txt) {
      const tag = document.createElement('input')
      tag.setAttribute('id', 'cp_input')
      tag.value = txt
      tag.style.opacity = '0'
      document.body.appendChild(tag)
      tag.select()
      document.execCommand('copy')
      tag.remove()
      this.$message.success('复制成功')
    },
  }
}
</script>
<style lang="less" scoped>
.camera-info {
  flex: 8;
  > h1 {
    font-weight: bold;
    font-size: 22px;
  }
  .base-info {
    section {
      background: #fff;
      padding: 10px;
      .info {
        flex: 1;
        flex-wrap: wrap;
        margin-left: 20px;
        span {
          width: 33.3%;
          line-height: 35px;
          label {
            &.offlineStatus {
              color: #f00;
            }
          }
          i {
            color: #1890ff;
            margin-left: 10px;
          }
        }
      }
    }
  }
  .work-info {
    section {
      background: #fff;
      .info {
        padding: 10px;
        h3 {
          font-weight: bold;
          font-size: 14px;
        }
        .row {
          flex-wrap: wrap;
          row-gap: 10px;
          span,
          p {
            width: 33.3%;
          }
        }
      }
    }
    .href {
      color: #1890ff;
      cursor: pointer;
      background: #fff;
    }
  }
  .stock-record,
  .breakdown-record {
    margin: 10px 0;
    section {
      background: #fff;
      padding: 10px;
      color: #1890ff;
      cursor: pointer;
    }
  }
}
</style>